import React from 'react';
import { connect } from 'react-redux';
import { Carousel, Icon, Button, List as BaseList } from 'antd';
import { Link } from 'react-router-dom';
import {
    MailOutlined, PhoneOutlined
} from '@ant-design/icons';
import action from '../../store/action/index';
import StatusIcon from '../../component/StatusIcon'

class List extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { isLoading: false };
    }

    async componentDidMount() {
        let { candidateData, queryList } = this.props;
        if (candidateData.data.length === 0) {
            queryList();//=>DISPATCH
        }
    }

    componentWillReceiveProps() {
        this.setState({ isLoading: false });
    }

    render() {
        let { candidateData } = this.props,
            { data } = candidateData;

        return <div className='listBox'>
            <div className='candidateList'>
                {data && data.length !== 0 ? (
                    <div>
                        {/* <BaseList
                            itemLayout="horizontal"
                            dataSource={data}
                            renderItem={item => (
                                <BaseList.Item>
                                    <BaseList.Item.Meta
                                        title={item.name}
                                        description={item.email}
                                    />
                                </BaseList.Item>
                            )}
                        /> */}
                        <ul className="listLayout">
                            {data.map((item, index) => {
                                let { name, id, email, create_at } = item;
                                return <li key={index}>
                                <Link to={{
                                    pathname: '/candidate/info',
                                    search: `?candidateId=${id}`
                                }}>
                                    <div>
                                    <div className="mainContent">
                                        <h2>{name}</h2>
                                        <StatusIcon status="Hired" />
                                        <p>{email}</p>
                                    </div>
                                    <div className="actionList">
                                        <PhoneOutlined />
                                        <MailOutlined />
                                    </div>
                                    </div>
                                </Link>
                                </li>;
                            })}
                        </ul>
                    </div>
                ) : 'no data or not login'}
            </div>
        </div >;
    }
}

export default connect(state => ({ ...state.candidate }), action.candidate)(List);